import React, { Component } from 'react'
import { Button, Space, Swiper, Toast } from 'antd-mobile'

const swiperItem = {
  height: '120px',
  color: '#ffffff',
  display: 'flex',
  justifyContent: 'center',
  alignItems: 'center',
  fontSize: '48px',
  userSelect: 'none',
}

const colors = ['#ace0ff', '#bcffbd', '#e4fabd', '#ffcfac']

const items = colors.map((color, index) => (
  <Swiper.Item key={index}>
    <div
      className={styles.content}
      style={{ background: color }}
      onClick={() => {
        Toast.show(`你点击了卡片 ${index + 1}`)
      }}
    >
      {index + 1}
    </div>
  </Swiper.Item>
))
export default class mySwiper extends Component {
  render() {
    return <Swiper>{items}</Swiper>
  }
}
